<extend name='Public/demo' />

<block name='contents'>
	<div class="row">
		<aside class="profile-nav col-xs-12 col-lg-6" >
				<section class="panel">
					<header class="panel-heading">
						用户年龄占比
						<p class="m-bot-none text-center pull-right">
							<span class="badge bg-primary" style='background:#F7464A'>未成年</span>
							<span class="badge bg-success" style='background:#46BFBD'>18-30</span>
							<span class="badge bg-info" style='background:#FDB45C'>30-40</span>
							<span class="badge bg-inverse" style='background:#949FB1'>40-50</span>
							<span class="badge bg-danger" style='background:#d97041'>50-60</span>
							<span class="badge bg-warning" style='background:#4D5360'>>60</span>
						</p>
					</header>
					<div class="panel-body text-center">
						<canvas id="age" height="300" width="400"></canvas>
					</div>
				</section>
		</aside>
		<aside class="profile-nav col-xs-12 col-lg-6" >
				<section class="panel">
						  <header class="panel-heading">
							  用户性别比例
						  </header>
						  <div class="panel-body">
							  <div id="hero-donut" class="graph" style="width: 400px;height: 300px;"></div>
						  </div>
				</section>
		</aside>
		<div class="row">
			<div class="col-lg-10 col-lg-offset-1" style="margin-top:20px;">	
				<div class="panel terques-chart">
					<div class="panel-body chart-texture">
						<div class="chart" >
							<div class="heading">
								<span>{$title}</span>
							</div>
							<div class="sparkline" data-type="line" data-resize="true" data-height="75" data-width="90%" data-line-width="1" data-line-color="#fff" data-spot-color="#fff" data-fill-color="" data-highlight-line-color="#fff" data-spot-radius="4" data-data="[{$month}]"></div>
						</div>
					</div>
					<div class="chart-tittle">
						<span class="title">Number</span>
						<span class="value" id="cltype">
							<a href="{:U('Admin/Index/index')}" class='<if condition="$alive eq month">active</if>' >months</a>
							|
							<a href="{:U('Admin/Index/index/type/days')}" class='<if condition="$alive eq days">active</if>'>days</a>
							|
							<a href="{:U('Admin/Index/index/type/years')}" class='<if condition="$alive eq years">active</if>'>years</a>
						</span>
					</div>
				</div>	
			</div>
			<div class="col-lg-10 col-lg-offset-1"  style="margin-top:20px;">
				<div class="border-head">
					<h3>前12地区注册人数分布</h3>
				</div>
				<div class="custom-bar-chart" style="height:120px">
					<foreach name="province" item="vo" key="k">
					
							<div class="bar {$k%2==0?'':'doted'}">
								<div class="title" style="width:60px">{$vo.area|default="未知"}</div>
								<div class="value tooltips" data-original-title="{$vo.na}" data-toggle="tooltip" data-placement="top">{$vo.num}</div>
							</div>
					</foreach>
				</div>
			</div>
		</div>		
	</div>
</block>
<block name='data'>
<script type="text/javascript">
var sex0 = {$sex0};
var sex1 = {$sex1};
var sex2 = {$sex2};
var age0_18 = {$age0_18};
var age18_30 = {$age18_30};
var age30_40 = {$age30_40};
var age40_50 = {$age40_50};
var age50_60 = {$age50_60};
var age60 = {$age60};
// alert(sex0);
var Script = function () {


	var ageData = [
		{
			value: age0_18,
			color:"#F7464A",
		},
		{
			value : age18_30,
			color : "#46BFBD"
		},
		{
			value : age30_40,
			color : "#FDB45C"
		},
		{
			value : age40_50,
			color : "#949FB1"
		},
		{
			value : age50_60,
			color : "#d97041"
		},
		{
			value : age60,
			color : "#4D5360"
		}

	];
	
	var sexData = [
		{
			value: sex1,
			color:"#F7464A",
		},
		{
			value : sex0,
			color : "#46BFBD"
		},
		{
			value : sex2,
			color : "#FDB45C"
		}
	];
	var lineChartData = {
		labels : ["","","","","","",""],
		datasets : [
			{
				fillColor : "rgba(220,220,220,0.5)",
				strokeColor : "rgba(220,220,220,1)",
				pointColor : "rgba(220,220,220,1)",
				pointStrokeColor : "#fff",
				data : [65,59,90,81,56,55,40]
			},
			{
				fillColor : "rgba(151,187,205,0.5)",
				strokeColor : "rgba(151,187,205,1)",
				pointColor : "rgba(151,187,205,1)",
				pointStrokeColor : "#fff",
				data : [28,48,40,19,96,27,100]
			}
		]

	};
	var pieData = [
		{
			value: 30,
			color:"#F38630"
		},
		{
			value : 50,
			color : "#E0E4CC"
		},
		{
			value : 100,
			color : "#69D2E7"
		}

	];
	var barChartData = {
		labels : ["January","February","March","April","May","June","July"],
		datasets : [
			{
				fillColor : "rgba(220,220,220,0.5)",
				strokeColor : "rgba(220,220,220,1)",
				data : [65,59,90,81,56,55,40]
			},
			{
				fillColor : "rgba(151,187,205,0.5)",
				strokeColor : "rgba(151,187,205,1)",
				data : [28,48,40,19,96,27,100]
			}
		]

	};
	var chartData = [
		{
			value : Math.random(),
			color: "#D97041"
		},
		{
			value : Math.random(),
			color: "#C7604C"
		},
		{
			value : Math.random(),
			color: "#21323D"
		},
		{
			value : Math.random(),
			color: "#9D9B7F"
		},
		{
			value : Math.random(),
			color: "#7D4F6D"
		},
		{
			value : Math.random(),
			color: "#584A5E"
		}
	];
	var tax_data = [
	     {"period": "2011 Q3", "licensed": 3407, "sorned": 660},
	     {"period": "2011 Q2", "licensed": 3351, "sorned": 629},
	     {"period": "2011 Q1", "licensed": 3269, "sorned": 618},
	     {"period": "2010 Q4", "licensed": 3246, "sorned": 661},
	     {"period": "2009 Q4", "licensed": 3171, "sorned": 676},
	     {"period": "2008 Q4", "licensed": 3155, "sorned": 681},
	     {"period": "2007 Q4", "licensed": 3226, "sorned": 620},
	     {"period": "2006 Q4", "licensed": 3245, "sorned": null},
	     {"period": "2005 Q4", "licensed": 3289, "sorned": null}
	];
	// Morris.Line({
	//   element: 'hero-graph',
	//   data: tax_data,
	//   xkey: 'period',
	//   ykeys: ['licensed', 'sorned'],
	//   labels: ['Licensed', 'Off the road'],
	//   lineColors:['#8075c4','#6883a3']
	// });

	Morris.Donut({
	  element: 'hero-donut',
	  data: [
	    {label: '男性', value: sex1 },
	    {label: '女性', value: sex0 },
	    {label: '保密', value: sex2 }
	  ],
	    colors: ['#41cac0', '#49e2d7', '#34a39b'],
	  formatter: function (y) { return y + "%" }
	});


	var radarChartData = {
		labels : ["","","","","","",""],
		datasets : [
			{
				fillColor : "rgba(220,220,220,0.5)",
				strokeColor : "rgba(220,220,220,1)",
				pointColor : "rgba(220,220,220,1)",
				pointStrokeColor : "#fff",
				data : [65,59,90,81,56,55,40]
			},
			{
				fillColor : "rgba(151,187,205,0.5)",
				strokeColor : "rgba(151,187,205,1)",
				pointColor : "rgba(151,187,205,1)",
				pointStrokeColor : "#fff",
				data : [28,48,40,19,96,27,100]
			}
		]

	};
	new Chart(document.getElementById("age").getContext("2d")).Doughnut(ageData);
	// new Chart(document.getElementById("sex").getContext("2d")).Doughnut(sexData);
	// new Chart(document.getElementById("line").getContext("2d")).Line(lineChartData);
	// new Chart(document.getElementById("radar").getContext("2d")).Radar(radarChartData);
	// new Chart(document.getElementById("polarArea").getContext("2d")).PolarArea(chartData);
	// new Chart(document.getElementById("bar").getContext("2d")).Bar(barChartData);
	// new Chart(document.getElementById("pie").getContext("2d")).Pie(pieData);
}();
</script>
</block>